<template>
  <div>
    <div>
      <el-input
        placeholder="请输入姓名查询"
        style="width: 300px "
        suffix-icon="el-icon-search"
        v-model="queryParams.checkinCusName"
      ></el-input>
      <el-button type="primary" style="margin: 10px 10px" @click="handlesearch"
        >查找
      </el-button>
      <el-button type="primary" style="margin: 10px 10px" @click="handleAdd"
        >添加信息
      </el-button>
    </div>
    <div>
      <el-table
        :data="cusData"
        ref="singleTable"
        stripe
        height="350"
        border
        style="width: 90%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="checkinCusInforId" label="入住人ID" width="130">
        </el-table-column>
        <el-table-column prop="checkinCusName" label="姓名" width="150">
        </el-table-column>
        <el-table-column prop="checkinCusIdCard" label="身份证号">
        </el-table-column>
        <el-table-column prop="checkinCusTel" label="电话号码">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- 设置分页结束 -->
    </div>

    <el-dialog
      title="添加入住人信息"
      :visible.sync="dialogaddVisible"
      width="55%"
    >
      <el-button @click="addCus" type="primary">添加入住人</el-button>
      <CustomerInfoView
        v-for="(item, index) in cus"
        :key="index"
        @deleteIndex="deleteCustomer"
        :index="index"
        :item="item"
        style="width:70%"
      >
      </CustomerInfoView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogaddVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="SubmitAdd"
          @keydown.enter.native="SubmitAdd"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import CustomerInfoView from "../../components/CustomerInfo.vue";
import {
  addCheckinCusInfo,
  listCheckinCusInfoPage,
  deleteCheckinCusInfo,
  searchCheckinCusInfoByName
} from "../../api/customer.js";
export default {
  name: "CheckInfo",
  components: {
    CustomerInfoView
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 当前页
      pageNum: 0,
      // 每页数据量
      pageSize: 0,
      dialogaddVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        checkinCusInforId: undefined,
        checkinCusName: undefined,
        checkinCusIdCard: undefined,
        checkinCusTel: undefined
      },
      //表格数据
      cusData: [],
      //入住人信息
      cus: [{}]
    };
  },
  mounted() {
    this.initcheckInCusData();
  },
  methods: {
    initCusData() {
      listCheckinCusInfoPage(this.queryParams).then(resp => {
        this.cusData = resp.data.list;
      });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.initcheckInCusData();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.initcheckInCusData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleClickChange(val) {
      this.currentRow = val;
    },
    addCus() {
      this.cus.push({});
    },
    deleteCustomer(index) {
      if (index !== 0) {
        this.cus.splice(index, 1);
      }
    },
    resetform() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        checkinCusInforId: undefined,
        checkinCusName: undefined,
        checkinCusIdCard: undefined,
        checkinCusTel: undefined
      };
    },
    //添加入住人
    handleAdd() {
      this.dialogaddVisible = true;
    },
    //按姓名搜索入住人
    handlesearch() {
      if (this.queryParams.checkinCusName != null) {
        console.log(this.queryParams.checkinCusName);
        searchCheckinCusInfoByName(this.queryParams.checkinCusName)
          .then(resp => {
            if (resp.data) {
              console.log(resp.data);
              this.$message({
                type: "success",
                message: "查询成功!"
              });
            } else {
              this.$message({
                type: "info",
                message: "查询失败!"
              });
            }
            this.resetform();
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          });
      } else {
        this.$message({
          type: "success",
          message: "客户信息列表已刷新!"
        });
      }
      this.initcheckInCusData();
    },

    //提交添加
    SubmitAdd() {
      addCheckinCusInfo(this.cus)
        .then(resp => {
          if (resp.data.code == "200") {
            this.$message.success("添加成功");
            this.dialogaddVisible = false;
          } else {
            this.$message.error(resp.data);
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
      this.resetform();
      this.initCusData();
    },
    //更新入住人员信息
    initcheckInCusData() {
      this.loading = true;
      listCheckinCusInfoPage(this.queryParams)
        .then(resp => {
          if (resp.data) {
            this.cusData = resp.data.data.list;
            this.total = resp.data.data.total;
            this.pageNum = resp.data.data.pageNum;
            this.pageSize = resp.data.data.pageSize;
            this.loading = false;
          }
        })
        .catch(error => {
          // 错误分为 status-请求错误 和 code-账号密码错误
          this.$message.error(error);
          console.log(error);
        });
      this.loading = false;
    },
    //删除入住人数据
    handleDelete(row) {
      this.$confirm('确定要删除"' + row.checkinCusName + '"吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() =>
        deleteCheckinCusInfo(row.checkinCusInforId)
          .then(resp => {
            if (resp.data.code == "200") {
              this.initCusData();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              // this.$message({
              //   type: "info",
              //   message: "删除失败!"
              // });
              this.$message.error(resp.data);
            }
          })
          .catch(error => {
            // 错误分为 status-请求错误 和 code-账号密码错误
            this.$message.error(error);
            console.log(error);
          })
      );
    }
  }
};
</script>

<style></style>
